<!-- 轮播图属性 -->
<template>
  <div class="drag-swipe-props">
    <div class="image">
      <image-item v-for="(item, index) in list" :key="index" v-bind.sync="item" :index="index" @remove="doRemove" />
      <a-button @click="addImage">添加轮播图</a-button>
    </div>
    <radio-selection label="图片样式" :selected.sync="iImgStyle" :options="imgStyleOptions" />
    <radio-selection label="图片倒角" :selected.sync="iChamfer" :options="chamferOptions" />
    <radio-selection label="填充方式" :selected.sync="iFillStyle" :options="fillStyleOptions" />
    <slider label="指示器" :min="0" :max="30" :value.sync="iPagePadding" />
  </div>
</template>

<script>
  import cloneDeep from 'lodash.clonedeep'
  import { ImageItem, RadioSelection, Slider } from './other'
  import { ImgStyle, FillStyle, Chamfer } from './Constants'
  export default {
    name: 'DraggableSwipeProps',
    props: {
      list: {
        type: Array,
        default: () => []
      },
      imgStyle: {
        type: Number
      },
      fillStyle: {
        type: Number
      },
      chamfer: {
        type: Number
      },
      pagePadding: {
        type: Number
      }
    },
    components: {
      ImageItem,
      RadioSelection,
      Slider
    },
    computed: {
      iImgStyle: {
        get () {
          return this.imgStyle
        },
        set (val) {
          this.$emit('update:imgStyle', val)
        }
      },
      iFillStyle: {
        get () {
          return this.fillStyle
        },
        set (val) {
          this.$emit('update:fillStyle', val)
        }
      },
      iChamfer: {
        get () {
          return this.chamfer
        },
        set (val) {
          this.$emit('update:chamfer', val)
        }
      },
      iPagePadding: {
        get () {
          return this.pagePadding
        },
        set (val) {
          this.$emit('update:pagePadding', val)
        }
      }
    },
    data () {
      return {
        imgStyleOptions: ImgStyle,
        fillStyleOptions: FillStyle,
        chamferOptions: Chamfer
      }
    },
    methods: {
      addImage () {
        const { list } = this
        const cloneList = cloneDeep(list)
        cloneList.push({
          imgSrc: '',
          title: ''
        })
        this.$emit('update:list', cloneList)
      },
      doRemove (index) {
        const { list } = this
        const cloneList = cloneDeep(list)
        cloneList.splice(index, 1)
        this.$emit('update:list', cloneList)
      }
    }
  }
</script>

<style lang="less" scoped>
  .drag-swipe-props {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
